<template>
  <div class="user-management content-section">
    <div class="card mb-4 shadow-sm">
      <div class="card-header bg-gradient-primary text-white rounded-top">
        <h2 class="mb-0 text-center">用户管理</h2>
      </div>
      <div class="card-body">
        <div class="row g-3 align-items-center mb-4">
          <div class="col-md-4">
            <label for="username" class="form-label">用户名</label>
            <input type="text" v-model="searchParams.username" class="form-control">
          </div>
          <div class="col-md-4">
            <label for="email" class="form-label">邮箱</label>
            <input type="text" v-model="searchParams.email" class="form-control">
          </div>
          <div class="col-md-4 d-flex gap-2 align-items-end">
            <button @click="searchUsers" class="btn btn-primary flex-grow-1">搜索</button>
            <button @click="resetSearch" class="btn btn-outline-secondary flex-grow-1">重置</button>
          </div>
        </div>

        <table class="table table-striped">
          <thead>
            <tr>
              <th>员工编号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>账户</th>
              <th>邮箱</th>
              <th>状态</th>
              <th>相关角色</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in userList" :key="user.id">
              <td>{{ user.employeeId }}</td>
              <td>{{ user.realName }}</td>
              <td>{{ user.gender }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.email }}</td>
              <td>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" v-model="user.status"
                    @change="updateUserStatus(user)">
                </div>
              </td>
              <td>
                <span v-for="role in user.roles" :key="role" class="badge bg-secondary me-1">
                  {{ role }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="d-flex justify-content-between align-items-center mt-3">
          <div class="d-flex gap-2">
            <select v-model="pageSize" class="form-select">
              <option :value="10">10条/页</option>
              <option :value="20">20条/页</option>
              <option :value="50">50条/页</option>
            </select>
          </div>
          <div class="d-flex gap-2 align-items-center">
            <button @click="currentPage--" :disabled="currentPage === 1" class="btn btn-outline-primary">
              上一页
            </button>
            <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
            <button @click="currentPage++" :disabled="currentPage >= totalPages" class="btn btn-outline-primary">
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const searchParams = ref({
  username: '',
  email: ''
});

const userList = ref([
  // 示例数据
  {
    id: 1,
    employeeId: 'ZY001',
    realName: '张三',
    gender: '男',
    username: 'zhangsan',
    email: 'zhangsan@example.com',
    status: true,
    roles: ['管理员', '考官']
  }
]);

const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(100);

const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

const searchUsers = async () => {
  try {
    const response = await fetch(`/api/user/list?page=${currentPage.value}&size=${pageSize.value}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(searchParams.value)
    });
    const data = await response.json();
    userList.value = data.list;
    totalItems.value = data.total;
  } catch (error) {
    console.error('获取用户列表失败:', error);
  }
};

const resetSearch = () => {
  searchParams.value = { username: '', email: '' };
  currentPage.value = 1;
  searchUsers();
};

const updateUserStatus = async (user) => {
  try {
    await fetch(`/api/user/status/${user.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: user.status })
    });
  } catch (error) {
    console.error('更新用户状态失败:', error);
  }
};
</script>

<style scoped>
.user-management {
  padding: 20px;
}
.form-switch .form-check-input {
  width: 3em;
  height: 1.5em;
}
</style>